import React from "react";
import styles from "./index.module.css";
import logo from "../../assets/image/logo.png";
import { Form, Input, Button, Checkbox } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { loginRequest } from "@requests/auth";
import { useNavigate } from "react-router-dom";

export default function Login() {
  const navigate = useNavigate();
  const onFinish = async (values: any) => {
    const res = await loginRequest(values);
    console.log(res);
    // 登录成功后跳转到首页
    localStorage.setItem("token", res.data.token);
    navigate("/home");
  };
  return (
    <div className={styles.login}>
      <div className={styles.container}>
        <img className={styles.logo} src={logo} alt="" />
        <Form
          size="large"
          validateTrigger={["onChange", "onBlur"]}
          autoComplete="off"
          onFinish={onFinish}
          initialValues={{
            mobile: "13911111111",
            code: "246810",
            isAgree: true,
          }}
        >
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: "请输入手机号" },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "手机格式不正确",
              },
            ]}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              { required: true, message: "请输入验证码" },
              { len: 6, message: "验证码6个字符串" },
            ]}
          >
            <Input prefix={<LockOutlined />} placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item
            name="isAgree"
            valuePropName="checked"
            rules={[
              {
                validator: (_, value) => {
                  if (value === true) return Promise.resolve();
                  else return Promise.reject(new Error("请勾选我已阅读并同意"));
                },
              },
            ]}
          >
            <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
